<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>域名配置管理系统</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- https://icones.js.org/collection/fa -->
    <style>
      .navbar-brand {
        font-weight: bold;
      }
      .tab-content {
        padding: 10px;
      }
      .card {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        border: 1px solid rgba(0, 0, 0, 0.125);
        transition: transform 0.2s;
      }

      .card:hover {
        transform: translateY(-2px);
      }

      .btn-primary {
        background-color: #0d6efd;
        border-color: #0d6efd;
      }

      .alert {
        border-radius: 0.375rem;
      }

      .table th {
        background-color: #f8f9fa;
      }

      .loading {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }
      .label-text {
        font-size: 12px;
        color: gray;
      }
      .ip6-text {
        font-size: 12px;
        cursor: pointer;
        background-color: burlywood;
        border-radius: 6px;
        padding: 3px;
      }
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }

      .fade-enter-active,
      .fade-leave-active {
        transition: opacity 0.5s;
      }

      .fade-enter,
      .fade-leave-to {
        opacity: 0;
      }
    </style>
  </head>

  <body>
    <div
      id="app"
      class="card container mt-4 card-header bg-light card-body p-0"
    >
      <!-- 标签卡导航 -->
      <ul
        class="nav nav-tabs"
        style="margin-bottom: 10px"
        id="toolTabs"
        role="tablist"
      >
        <li class="nav-item" role="presentation">
          <button
            class="nav-link"
            :class="{'active': currentPage === 'ip6'}"
            id="ip6-tab"
            @click="currentPage = 'ip6'"
            type="button"
            role="tab"
          >
            <i class="fas fa-network-wired"></i> IP6解析
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button
            class="nav-link"
            :class="{'active': currentPage === 'mysql'}"
            @click="currentPage = 'mysql'"
            id="mysql-tab"
            type="button"
            role="tab"
          >
            <i class="fas fa-database"></i> MySQL备份
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button
            class="nav-link"
            :class="{'active': currentPage === 'memos'}"
            id="memos-tab"
            @click="currentPage = 'memos'"
            type="button"
            role="tab"
          >
            <i class="fas fa-sticky-note"></i> Memos备份
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button
            class="nav-link"
            id="reminder-tab"
            :class="{'active': currentPage === 'reminder'}"
            @click="currentPage = 'reminder'"
            type="button"
            role="tab"
          >
            <i class="fas fa-bell"></i> 提醒设置
          </button>
        </li>
      </ul>

      <!-- IP6解析标签卡 -->
      <div
        class="tab-pane fade show active tab-content"
        v-if="currentPage === 'ip6'"
      >
        <div class="mb-3">
          <h5><i class="fas fa-cog"></i> 域名提供商配置</h5>
          <hr class="my-2" />
        </div>
        <form @submit.prevent="saveConfig">
          <div class="mb-3">
            <label for="provider" class="form-label">
              <i class="fas fa-server"></i> 域名提供商
            </label>
            <select
              class="form-select"
              id="provider"
              v-model="form.ip6.provider"
              required
            >
              <option value="">请选择提供商</option>
              <option
                v-for="provider in providers"
                :key="provider.value"
                :value="provider.value"
              >
                {{ provider.label }}
              </option>
            </select>
          </div>

          <div class="mb-3">
            <label for="domain" class="form-label">
              <i class="fas fa-globe"></i> 域名
              <span class="label-text">请输入完整的域名，包括子域名</span>
            </label>
            <input
              type="text"
              class="form-control"
              id="domain"
              pattern="^[a-zA-Z0-9\-]{0,61}\.[a-zA-Z0-9\-]{0,61}\.[a-zA-Z0-9]{2,}$"
              v-model="form.ip6.domain"
              placeholder="例如: aa.example.com"
              required
            />
          </div>

          <div class="mb-3">
            <label for="api_key" class="form-label">
              <i class="fas fa-key"></i> API Key
              <span class="label-text">用于身份验证</span>
            </label>
            <input
              class="form-control"
              id="api_key"
              v-model="form.ip6.api_key"
              placeholder="输入您的API Key"
              required
            />
          </div>

          <div class="mb-3">
            <label for="secret" class="form-label">
              <i class="fas fa-lock"></i> Secret
              <span class="label">用于API签名</span>
            </label>
            <input
              class="form-control"
              id="secret"
              v-model="form.ip6.secret"
              placeholder="输入您的Secret"
              required
            />
          </div>

          <div class="mb-3">
            <label for="interval" class="form-label">
              <i class="fas fa-clock"></i> 间隔 (分钟)
              <span class="label-text">循环检测IP6，域名解析间隔</span>
            </label>
            <input
              type="number"
              class="form-control"
              id="interval"
              v-model="form.ip6.interval"
              min="10"
              max="99999999999"
              required
            />
          </div>

          <div
            class="d-grid gap-2 d-md-flex justify-content-md-end"
            style="align-items: center !important; margin-bottom: 20px"
          >
            <div>
              <div style="margin-right: 10px; font-size: 14px">
                上次保存时间:{{form.created_at}}
              </div>
              <div class="ip6-text" @click="loadIP6">全局IP6:{{ip6}}</div>
            </div>
            <button type="submit" class="btn m btn-primary" :disabled="loading">
              <span v-if="loading" class="loading"></span>
              <i v-else class="fas fa-save"></i> 保存配置
            </button>
            <span
              @click="testIp6"
              class="btn btn-primary"
              style="margin-left: 10px"
            >
              <i class="fas fa-server"></i> 测试解析
            </span>
          </div>
        </form>
      </div>

      <!-- MySQL备份标签卡 -->
      <div
        class="tab-pane fade show tab-content tab-content"
        v-if="currentPage === 'mysql'"
      >
        <div class="mb-3">
          <h5><i class="fas fa-database"></i> MySQL备份设置</h5>
          <hr class="my-2" />
        </div>
        <div class="alert alert-info" role="alert">
          <i class="fas fa-info-circle"></i> MySQL备份功能正在开发中...
        </div>
      </div>

      <!-- Memos备份标签卡 -->
      <div class="tab-pane fade show" v-if="currentPage === 'memos'">
        <div class="mb-3">
          <h5><i class="fas fa-sticky-note"></i> Memos备份设置</h5>
          <hr class="my-2" />
        </div>
        <form @submit.prevent="saveConfig">
          <div class="mb-3">
            <label for="docker_container" class="form-label">
              <i class="fas fa-server"></i> Docker容器名称
              <span class="label-text">输入需要备份的Docker容器名称</span>
            </label>
            <input
              type="text"
              class="form-control"
              id="docker_container"
              required
              v-model="form.memos.container"
              placeholder="如: memos_db"
            />
          </div>

          <div class="mb-3">
            <label for="docker_webdav_url" class="form-label">
              <i class="fas fa-cloud"></i> WebDAV地址
              <span class="label-text">备份文件的存储地址</span>
            </label>
            <input
              type="text"
              class="form-control"
              id="docker_webdav_url"
              required
              v-model="form.docker.webdav_url"
              placeholder="https://example.com/remote.php/dav/files/username/"
            />
          </div>

          <div class="row mb-3">
            <div class="col-md-6">
              <label for="docker_webdav_user" class="form-label">
                <i class="fas fa-user"></i> WebDAV用户名
              </label>
              <input
                type="text"
                class="form-control"
                id="docker_webdav_user"
                required
                v-model="form.memos.webdav_user"
                placeholder="WebDAV用户名"
              />
            </div>
            <div class="col-md-6">
              <label for="docker_webdav_pass" class="form-label">
                <i class="fas fa-lock"></i> WebDAV密码
              </label>
              <input
                type="password"
                class="form-control"
                id="docker_webdav_pass"
                required
                v-model="form.memos.webdav_pass"
                placeholder="WebDAV密码"
              />
            </div>
          </div>

          <div class="mb-3">
            <label for="docker_interval" class="form-label">
              <i class="fas fa-calendar-alt"></i> 备份周期（天）
              <span class="label-text">设置自动备份的间隔天数</span>
            </label>
            <input
              type="number"
              class="form-control"
              id="docker_interval"
              required
              min="1"
              max="365"
              v-model="form.memos.interval"
              placeholder="如: 1"
            />
          </div>

          <div class="d-flex justify-content-end">
            <button type="submit" class="btn btn-primary">
              <i class="fas fa-save"></i> 保存设置
            </button>
            <span
              @click="testMemos"
              class="btn btn-primary"
              style="margin-left: 10px"
            >
              <i class="fas fa-server"></i> 测试备份
            </span>
          </div>
        </form>
      </div>

      <!-- 提醒设置标签卡 -->
      <div
        class="tab-pane fade show tab-content"
        v-if="currentPage === 'reminder'"
      >
        <div class="mb-3">
          <h5><i class="fas fa-bell"></i> 提醒设置</h5>
          <hr class="my-2" />
        </div>
        <form @submit.prevent="saveConfig">
          <div class="mb-3">
            <label for="email" class="form-label">
              接收Email
              <span class="label-text"
                >解析设置后日志会发送到指定的邮箱，发送邮箱，密码同时填与才会有效</span
              >
            </label>
            <input
              class="form-control"
              id="email"
              required
              pattern="[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z]{2,}$"
              v-model="form.reminder.email"
              placeholder="输入您的Email"
            />
          </div>
          <div class="mb-3">
            <label for="email_send" class="form-label">
              发送Email
              <span class="label-text">发送邮件所用的邮箱</span>
            </label>
            <input
              class="form-control"
              id="email_send"
              required
              v-model="form.reminder.email_send"
              placeholder="输入您的Email"
            />
          </div>
          <div class="mb-3">
            <label for="email_send_pd" class="form-label">
              Email密码
              <span class="label-text">发送邮件的密码smtp</span>
            </label>
            <div class="input-group">
              <input
                class="form-control"
                id="email_send_pd"
                required
                v-model="form.reminder.email_send_pd"
                placeholder="输入您的Email密码"
              />
              <button
                @click="sendEmail"
                class="btn btn-outline-secondary"
                type="button"
              >
                <i class="fas fa-solid fa-envelope"></i>发送
              </button>
            </div>
          </div>
          <div class="d-grid gap-2 d-md-flex justify-content-md-end">
            <button type="submit" class="btn btn-primary">
              <i class="fas fa-save"></i> 保存设置
            </button>
          </div>
        </form>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      const { createApp } = Vue;

      createApp({
        data() {
          return {
            providers: [{ value: 1, label: "阿里云 (Aliyun)" }],
            ip6: "",
            currentPage: "ip6",
            form: {
              ip6: {
                provider: 1,
                domain: "",
                api_key: "",
                secret: "",
                email: "",
                email_send: "",
                email_send_pd: "",
                interval: 30,
              },
              mysql: {
                provider: 1,
                domain: "",
                api_key: "",
                secret: "",
                email: "",
                email_send: "",
                email_send_pd: "",
                interval: 30,
              },
              memos: {
                container: "",
                webdav_url: "",
                webdav_user: "",
                webdav_pass: "",
                interval: 1,
              },
              reminder: {
                email: "",
                email_send: "",
                email_send_pd: "",
              },
            },
            loading: false,
          };
        },
        mounted() {
          this.loadConfig();
          this.loadIP6();
        },
        methods: {
          async sendEmail() {
            if (
              this.form.reminder.email == undefined ||
              this.form.reminder.email_send == undefined ||
              this.form.reminder.email_send_pd == undefined
            ) {
              this.showMessage("接收邮箱、发送邮箱、密码必填");
              return;
            }
            if (
              this.form.reminder.email.length < 1 ||
              this.form.reminder.email_send.length < 1 ||
              this.form.reminder.email_send_pd.length < 1
            ) {
              this.showMessage("接收邮箱、发送邮箱、密码长度不合法");
              return;
            }
            try {
              const response = await axios.post("/api/send_email", this.form);
              this.showMessage(response.data.data);
            } catch (error) {
              console.error("测试邮件发送失败:", error);
            }
          },
          async loadIP6() {
            try {
              const response = await axios.get("/api/ip6");
              this.ip6 = response.data.data;
            } catch (error) {
              console.error("获取全局IP失败:", error);
            }
          },
          async testIp6() {
            try {
              const response = await axios.post("/api/domain_resolution");
              this.showMessage(response.data.data);
            } catch (error) {
              this.showMessage("调用域名解析失败" + error);
            }
          },
          async testMemos() {
            try {
              const response = await axios.post("/api/domain_resolution");
              this.showMessage(response.data.data);
            } catch (error) {
              this.showMessage("调用域名解析失败" + error);
            }
          },
          async loadConfig() {
            try {
              const response = await axios.get("/api/config");
              if (response.data.success) {
                this.form = Object.assign({}, this.form, response.data.data);
              }
            } catch (error) {
              console.error("加载配置失败:", error);
            }
          },
          async saveConfig() {
            this.loading = true;
            try {
              const response = await axios.post("/api/config", this.form);
              if (response.data.success) {
                this.showMessage("配置保存成功！", "success");
                await this.loadConfig();
              } else {
                this.showMessage(response.data.message || "保存失败", "danger");
              }
            } catch (error) {
              console.error("保存配置失败:", error);
              this.showMessage("保存配置失败", "danger");
            } finally {
              this.loading = false;
            }
          },
          async saveDockerConfig() {
            this.loading = true;
            try {
              const response = await axios.post("/api/config", this.form);
              if (response.data.success) {
                this.showMessage("Docker备份配置保存成功！", "success");
                await this.loadConfig();
              } else {
                this.showMessage(response.data.message || "保存失败", "danger");
              }
            } catch (error) {
              console.error("保存Docker备份配置失败:", error);
              this.showMessage("保存Docker备份配置失败", "danger");
            } finally {
              this.loading = false;
            }
          },
          showMessage(text, type = "success") {
            alert(text);
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>
